﻿@model Fish.Models.EventInfo
@section scripts{<style>
    #map-canvas {
        height: 100%;
        margin: 0px;
        padding-bottom: 200px;
        padding-left: 300px;
        left: 100px;
        width:500px;
        top: -5px;
    }


</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
   
    var geocoder;
    var map;
    function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var mapOptions = {
            zoom: 18,
            center: latlng
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    }

    function codeAddress() {
        var address = document.getElementById('Address').value;
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                    
                });
               
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);


</script>
}
    




   

<h2>Create</h2>


@using (Html.BeginForm("Create", "EventInfo", FormMethod.Post, new { @class = "form-horizontal", role = "form", enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>EventInfo</h4>
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            @Html.LabelFor(model => model.EventImage, "Image", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <input type="file" name="uploadedImage" />
            </div>
        </div>

        <div class="form-group">
            @Html.Label("Event Name", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @ViewBag.EventName

            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Description, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextAreaFor(model => model.Description)
                @Html.ValidationMessageFor(model => model.Description)
            </div>
        </div>

        
        <div class="form-group">
            @Html.LabelFor(model => model.Address, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Address)
                @Html.ValidationMessageFor(model => model.Address)


                <span id="panel">
                    <input type="button" value="Find" onclick="codeAddress()" />
                </span>
            </div>
        </div>

        <div id="map-canvas"></div>

        <div class="form-group">
            @Html.LabelFor(model => model.StartDate, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.StartDate)
                @Html.ValidationMessageFor(model => model.StartDate)
                @Html.ValidationMessage("Date error")
                <input id="endCheck" name="endCheck" type="checkbox" onclick="checkEndDate()" />
                @Html.Label("Add End Data")
            </div>
        </div>


        <div class="form-group" id="endDateId" style="display:none">
            @Html.LabelFor(model => model.EndDate, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.EndDate)
                @Html.ValidationMessageFor(model => model.EndDate)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.MaximumGuests, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <input id="limitedCheck" name="limitedCheck" type="checkbox" onclick="checklimited()" />
                @Html.Label("Limit Number of Guests")
                <div id="numberUsers" style="display:none">
                    @Html.EditorFor(model => model.MaximumGuests)
                    @Html.ValidationMessageFor(model => model.MaximumGuests)
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" onSubmit="return false" />
            </div>
        </div>
    </div>
}



<div>
    @Html.ActionLink("Back to List", "Index")
</div>

<script>
    checklimited
    function checklimited() {
        if (document.getElementById("limitedCheck").checked) {
            document.getElementById("numberUsers").style.display = "block";
        } else {
            document.getElementById("numberUsers").style.display = "none";
        }
    }
    function checkEndDate() {
        if (document.getElementById("endCheck").checked) {
            document.getElementById("endDateId").style.display = "block";
        } else {
            document.getElementById("endDateId").style.display = "none";
        }
    }
</script>


 

